<template>
  <div class="account">
    <Navi :title="'个人资料'" :flexd="true" />
    <div class="accbox">
      <div class="tou">
        <div class="tx">头像</div>
        <div class="tximg">
          <img class="auto-img" :src="usr.img" alt="" />
        </div>
      </div>
      <div class="tou">
        <div class="tx">ID</div>
        <div class="tx1">{{ usr.id }}</div>
      </div>
      <div class="tou">
        <div class="tx">昵称</div>
        <div class="tx1">{{ usr.name }}</div>
      </div>
      <div class="tou">
        <div class="tx">简介</div>
        <div class="tx1">{{ usr.jian }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Navi from "../components/Navi.vue";
export default {
  name: "Account",
  components: {
    Navi,
  },
  data() {
    return {
      usr: {
        img: "",
        id: "",
        name: "",
        jian: "",
      },
    };
  },
  created() {
    this.$toast("加载成功");
    this.getdata();
  },
  methods: {
    getdata() {
      let localData = JSON.parse(localStorage.getItem("token"));
      if (localData != "" && localData != undefined) {
        this.usr.img =
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F9%2F4%2F476b2be9-d62c-4e25-840f-2b39898ea8fd.png&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651199649&t=bb9d140f787ab0461a69bd76857b6dc5";
        this.usr.id = localData.phone;
        this.usr.name = localData.nickName;
        this.usr.jian = "这家伙很懒，什么也没有留下！";
      }else{
        return
      }
    }
  }
};
</script>

<style lang="less" scoped>
.accbox {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  .tou {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
    border-bottom: 2px solid #f0f0f0;
    .tx {
      color: #333;
      font-size: 16px;
      line-height: 50px;
    }
    .tximg {
      width: 46px;
      height: 46px;
      background-color: #f0f0f0;
      border: 1px solid #f0f0f0;
      border-radius: 50%;
    }
    .tx1 {
      color: #666;
      font-size: 14px;
      line-height: 50px;
    }
  }
}
</style>